<template>
  <div>
    <el-row style="display:flex">
      <el-col :span="2"></el-col>
      <el-col :span="20">
      <el-table
        :data="userObj"
        style="width: 100%">
        <el-table-column
          label="评论ID编号"
          width="100"
          prop="id">
        </el-table-column>
        <el-table-column
          label="评论信息"
          width="240"
          prop="content">
        </el-table-column>
        <el-table-column
          label="点赞数"
          width="120">
            <template slot-scope="scope">
                <img style="width:30px;height:30px" v-if="checkIsZan(scope.row.id)" src="../image/nozan.png" @click="addZan(scope.row)">
                <img style="width:30px;height:30px" v-else src="../image/zan.png" @click="removeZan(scope.row)">
                <span class=numberCla>{{scope.row.totalZan}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      </el-col>
    </el-row>
    <hr>
    <el-row style="display:flex">
      <el-col :span="2"></el-col>
      <el-col :span="12">
        <!-- <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="pageClick"
          :current-page="currentPage"
          :page-sizes="[2, 4, 8]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="userObj.totalElements">
        </el-pagination> -->
      </el-col>
    </el-row>
    
  </div>
</template>

<script>

// import {mapState,mapActions} from 'vuex'
export default {
    data(){
      return{
        userObj:{},
        currentPage:1,
        pageSize:4
      }
    },
    computed:{
        // ...mapState("showAll",["pageObj"])
        
    },
    methods:{
        // ...mapActions("showAll",["findAll"]),
        addZan(){
          alert("点赞")
        },
        removeZan(){

        },
        //判断是否已经点赞
        async checkIsZan(comId){
            var tokenTemp = this.$cookies.get("token");
            if(tokenTemp == null || tokenTemp.length == 0){
              return false;
            }
            var info =await this.ajax.postSubmitWithToken("/project/commend/checkIsZan",{paramObj:{commendId:comId}},{token:tokenTemp});
            console.log("******");
            console.log(info);
            if(info == "ok"){
              return true
            }
           return false;
        },
        async addZanDao(obj){

            var tokenTemp = this.$cookies.get("token");
            var info =await this.ajax.postSubmitWithToken("/project/users/addZan",{paramObj:{commendId:obj.id}},{token:tokenTemp});
            console.log(info);
            if(info == "ok"){
              obj.userBean = true;
            }else{
              obj.userBean = false;
            }
        },
        async removeZan(obj){
            var tokenTemp = this.$cookies.get("token");
            var info =await this.ajax.postSubmitWithToken("/project/users/removeZan",{paramObj:{commendId:obj.id}},{token:tokenTemp});
            console.log(info);
            if(info == "ok"){
              obj.userBean = true;
            }else{
              obj.userBean = false;
            }
        },
        async findPages(){
          var tokenTemp = this.$cookies.get("token");
          var User =await this.ajax.getSubmitWithToken("/project/commend/getTotal",{paramObj:null},{token:tokenTemp});
          // console.log(User)
          this.userObj = User;
          // console.log(User)
          // alert("**")
        },
        //更改页码
        async pageClick(pn){
          this.currentPage = pn;
          await this.findPages();
        },
        // 更改每页的记录数
        async handleSizeChange(pn){
          this.pageSize=pn;
          this.currentPage = 1;
          await this.findPages();
        }
    },
    async mounted(){
      await this.findPages();
    }
}
</script>

<style>
  .numberCla{
    font-size: 28px;
  }
</style>